<template>
  <div>
      	<brand></brand>
    <div id="box">
          <select name="" id="" v-model="subjectId">
              <option value="">全部班级</option>
              <option :value="item._id" v-for="item in subjects" :key="item._id">{{item.name}}</option>
          </select>
          <!-- <input type="text" class="input" v-model="input"> -->
          <!-- <button @click="searchClasses()">确认搜索</button> -->
        </div>
    <table border="1">
      <thead>
        <th>编号</th>
        <th>所属专业</th>
        <th>班级名称</th>
        <th>操作</th>
      </thead>
      <tbody>
          <tr v-for="item in classes" :key="item._id">
              <td>{{item._id}}</td>
              <td>{{item.subjectsId? item.subjectsId.name:'暂无'}}</td>
              <td>{{item.name}}</td>
              <td><a class="lookup" href="#" @click.prevent="lookUp()">查看</a> <a class="update" href="#" @click.prevent="getupdateClasses()">修改</a> <a class="del" href="#" @click.prevent="delClasses(item._id)">删除</a></td>
          </tr>
      </tbody>
    </table>
    <div id="page">
      <span>共 {{total}} 条</span>
      <select name="" id="" v-model="pageSize">
        <option value="10">10条/每页</option>
        <option value="5">5条/每页</option>
        <option value="15">15条/每页</option>
        <option value="20">20条/每页</option>
      </select>
      <button @click="prePage()" :class='{disabled:currentPage==1}'>&lt;</button>
      <span>{{currentPage}}</span>
      <button @click="nextPage()" :class='{disabled:currentPage==totalPages}'>&gt;</button>
      <span>{{currentPage}} / {{totalPages}}</span>
      <span>前往</span>
      <input type="text" value="1" @blur="toPage()" v-model="goPage">
      <span>页</span>
      </div>
  </div>
</template>

<script>
import brand from '../common/brand.vue'

export default {
	components:{
		brand
	},
    data() {
        return {
            subjects:[],
            subjectId:'',
            classes:[],
            pageSize:10,
            currentPage:1,
            total:0,
            totalPages:0,
            goPage:1
        }
    },
    watch:{
    pageSize:{
        handler () {
          // 当侦听的数据发生变化时要执行的操作...
          this.currentPage = 1;
          this.getClasses();
            },
        deep: true // 深度侦听
    },
    subjectId:{
        handler () {
          // 当侦听的数据发生变化时要执行的操作...
          this.getClassesBySubjectId();
            },
        deep: true // 深度侦听
    }
  },
    created(){
        this.getClasses();
        this.getSubjects();
    },
    methods: {

        //获取班级
        async getClasses(){
            const {data} = await this.$api.classes.getClasses(this.pageSize,this.currentPage);
            this.classes = data.data.rows;
            this.total = data.data.total;
            this.totalPages = data.data.pages;
            if(this.totalPages==0){
                this.totalPages=1;
            }
            // console.log(this.classes);
        },

        //获取专业
        async getSubjects(){
           const {data} = await this.$api.subjects.getSubjects();
           console.log(data.data.rows);
           this.subjects = data.data.rows;
        },

        //获取专业对应的班级
        async getClassesBySubjectId(){
          if(this.subjectId == ''){
            this.getClasses();
          }else{
            this.currentPage = 1;
            const {data} = await this.$api.classes.getClassesBySubjectsId(this.subjectId);
            console.log(data);
            this.classes = data.data.rows;
            this.total = data.data.total;
            this.totalPages = data.data.pages;
            if(this.totalPages==0){
                this.totalPages=1;
            }
          }
        },

        searchClasses(){
            console.log(123);
        },
        lookUp(){
            console.log(123);
        },
        getupdateClasses(){
            console.log(123);
        },

        //删除班级
        async delClasses(classesId){
            const {data} = await this.$api.classes.delClasses(classesId);
            console.log(data);
            if(data.code){
                alert('删除班级成功！');
                this.getClasses();
            }
        },
        
        prePage(){
            if(this.currentPage>1){
                this.currentPage--;
                this.getClasses();
            }
        },
        nextPage(){
            if(this.currentPage<this.totalPages){
                this.currentPage++;
                this.getClasses();
            }
        },
        toPage(){
		    if(this.goPage<=this.totalPages&&this.goPage>=1){
			    this.currentPage = this.goPage;
			    this.getClasses();
		    }
        },
    },
}
</script>

<style scoped lang='scss'>
h2{
  margin: 0;
  margin-bottom: 10px;
}
#box{
  text-align: center;
  margin-bottom: 20px;
select{
    width: 270px;
    height: 36px;
    padding-left: 2px;
    outline: none;
    margin-right: 13px;
    border: 1px solid #dedede;
    border-radius: 4px;
}
.input{
    width: 260px;
    height: 32px;
    padding-left: 8px;
    outline: none;
    margin-right: 20px;
    border: 1px solid #dedede;
    border-radius: 4px;
}
input:focus{
        border: 1px solid #2f54eb;
        box-shadow:  0px 0px 0 1px #BDE7FF, 0px 0px 0 1px #BDE7FF;
        }
button{
    width: 80px;
    height: 35px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}
button:hover{
    background-color: rgb(73, 73, 245);
    color: white;
}
}
table{
  width: 100%;
  border:1px solid #ebeef5;
  border-collapse: collapse;
  tr{
    cursor: pointer;
    &:hover{
      background-color: #f5f7fa;
    }
  }
  th,td{
    height: 50px;
    width: 25%;
    text-align: center;
    // color: #909399;
    &:last-child{
      width: 300px;
    }
    &:first-child{
      width: 350px;
    }
  }
  a{
  display: inline-block;
  text-decoration: none;
  width: 56px;
  height: 30px;
  line-height: 30px;
  margin: 0 4px;
  border-radius: 3px;
  font-size: 14px;
}
  .lookup{
  background-color: #2f54eb;
  color:#fff;
  &:hover{
    background-color: #5976ef;
  }
}
.update{
  border: 1px solid #dcdfe6;
  &:hover{
    background-color: #eaeefd;
  }
}
.del{
  background-color: #f56c6c;
  color: #fff;
  &:hover{
    background-color: #f78989;
  }
}
}
#page{
  margin-top: 15px;
  span{
    margin: 0 8px;
    font-size: 15px;
  }
  select{
    width: 100px;
    height: 30px;
    text-align: center;
  }
  button{
    width: 30px;
    height: 30px;
    margin: 5px;
  }
  .disabled{
    cursor: not-allowed;
    &:hover{
      background-color: #efefef;
      color: #000;
    }
  }
  input{
    width: 45px;
    height: 28px;
    text-align: center;
    outline: none;
    padding: 0;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
  }
}
</style>